<template>
	<view class="content">
		<view class="list-cell" v-for="(item,index) in list" :key="index">
			<view class="a">
				<view class="a-title">
					<text>{{item.title}}</text>
				</view>
				<view class="a-price">
					<text>¥{{item.data.all}}</text>
				</view>
			</view>
			
			<view class="b">
				<view class="b-title">
					<text>预估推广收益</text>
				</view>
				<view class="b-price">
					<text>¥{{item.data.promo_yugu}}</text>
				</view>
			</view>
			
			<view class="c">
				<view class="c-title">
					<text>预估奖励收益</text>
				</view>
				<view class="c-price">
					<text>¥{{item.data.order_yugu}}</text>
				</view>
			</view>
			
			<view class="d">
				<view class="d-title">
					<text>身份奖励</text>
				</view>
				<view class="d-price">
					<text>¥{{item.data.level_prize}}</text>
				</view>
			</view>
			<view class="d">
				<view class="d-title">
					<text>拉新奖励</text>
				</view>
				<view class="d-price">
					<text>¥{{item.data.new_prize}}</text>
				</view>
			</view>
			<view class="d">
				<view class="d-title">
					<text>平台奖励</text>
				</view>
				<view class="d-price">
					<text>¥{{item.data.platform_prize}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		JSMRequest
	} from '@/module/api'
	export default {
		data() {
			return {
				list:[
					{
						title:'今天预估总收益',
						data:{}
					},
					{
						title:'本月预估总收益',
						data:{}
					},
					{
						title:'上月预估总收益',
						data:{}
					}
				],
			}
		},
		
		onLoad() {
			this.getData()
		},
		
		methods: {
			getData(){
				let _t = this				
				JSMRequest({
					tag: "jsm-user-moneyDetail",
					method: "POST",
					params: {
						
					}
				}).then(({data}) => {
					_t.list[0].data = data.today
					_t.list[1].data = data.tomonth
					_t.list[2].data = data.lastmonth
				}).catch(e => {
					
				})
			}
		}
	}
</script>

<style lang="less">
page {
	background-color: #EEEEEE;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	.list-cell {
		background-color: white;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		width: 95%;
		margin-top: 30px;
		.a {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px 10px 20px;
			.a-title{
				text{
					font-size: 32px;
				}
			}
			.a-price {
				font-size: 32px;
				color: red;
			}
		}
		
		.b {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px 10px 20px;
			.b-title{
				text{
					font-size: 28px;
					color: gray;
				}
			}
			.b-price {
				font-size: 28px;
				color: gray;
			}
		}
		
		.c {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px 10px 20px;
			.c-title{
				text{
					font-size: 28px;
					color: gray;
				}
			}
			.c-price {
				font-size: 28px;
				color: gray;
			}
		}
		
		.d {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px 10px 20px;
			.d-title{
				text{
					font-size: 24px;
					color: gray;
				}
			}
			.d-price {
				font-size: 24px;
				color: gray;
			}
		}
	}
}
</style>
